<template>
  <el-container :class="dataSource.isCollapse?'open':'close'">
    <el-header class="level">
      <div class="imi-logo tc" >
        <sub v-if="dataSource.isCollapse">IMI</sub>
        <sub v-else>IMI-ADMIN</sub>
      </div>
      <div class="imi-channel">
        <div class="plr10 level">
          <div class="plr10">
            <i class="el-icon-s-unfold" v-if="dataSource.isCollapse"  @click="onCollapse"></i>
            <i class="el-icon-s-fold" v-else @click="onCollapse"></i>
          </div>
          <div class="plr15">计划管理</div>
          <div class="plr15">销售管理</div>
          <div class="plr15">采购管理</div>
          <div class="right imi-user">
            <el-dropdown :hide-on-click="false">
                <span class="el-dropdown-link">
                  超级管理员<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>基本资料</el-dropdown-item>
                  <el-dropdown-item>修改密码</el-dropdown-item>
                  <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <i class="el-icon-more mlr20"></i>
          </div>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
            class="imi-menu"
            :default-active="dataSource.defaultActive"
            :collapse="dataSource.isCollapse"
            background-color="#1b2327"
            text-color="#fff"
            active-text-color="#409EFF"
            router
        >
          <NavMenu :navMenus="dataSource.menuData"></NavMenu>
        </el-menu>
      </el-aside>
      <el-main>
        <el-tabs v-model="dataSource.editableTabsValue" type="card"  closable @tab-click="handleClick" @tab-remove="removeTab">
          <el-tab-pane v-for="(item, index) in dataSource.editableTabs" :key="index" :name="item.id">
            <template #label>
              <span><i :class="item.icon"></i> {{ item.title }}</span>
            </template>
          </el-tab-pane>
        </el-tabs>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {defineComponent, reactive, watch, onMounted} from "vue";
import {ElContainer,ElHeader,ElMain,ElMenu,ElAside,ElTabs,ElTabPane} from 'element-plus'
import { useStore }  from "vuex"
import { useRouter } from "vue-router";
import NavMenu from './NavMenu'
export default defineComponent ({
  name: "Index",
  components:{
    ElContainer,
    ElHeader,
    ElMain,
    ElMenu,
    ElAside,
    ElTabs,
    ElTabPane,
    NavMenu
  },
  setup(){
    const  store = useStore();
    const  router = useRouter();
    const  dataSource = reactive({
      editableTabs:[],
      editableTabsValue:0,
      defaultActive:-1,
      isCollapse:false,
      menuData:[
        {id:-1,title:"展示台",icon:'el-icon-s-platform',path:'/index'},
        {id:1,title:"系统管理",icon:'el-icon-s-tools',path:'aaa',children:[
            {id:110,title:"用户管理",icon:'el-icon-user-solid',path:'/sys/user'},
            {id:111,title:"菜单管理",icon:'el-icon-platform-eleme',path:'/sys/menu'},
            {id:112,title:"机构管理",icon:'el-icon-s-help',path:'/sys/org'},
            {id:113,title:"角色管理",icon:'el-icon-s-home',path:'/sys/role'},
          ]
        }
      ]
    })
    const removeTab = (targetName)=>{
      store.commit("removeTab",targetName);
    }
    const handleClick = (tab)=>{
      let ele = dataSource.editableTabs[tab.index];
      dataSource.defaultActive = ele.path;
      router.push({path: ele.path});
    }
    const onCollapse = ()=>{
      dataSource.isCollapse = !dataSource.isCollapse;
    }
    watch(()=>store.state.active,()=>{
      let ele = store.getters.tabActivePath;
      dataSource.defaultActive = ele.path,
      dataSource.editableTabsValue = store.getters.tabActive;
      dataSource.editableTabs = store.getters.loadTabs;
      router.push({path: ele.path });
    })
    onMounted(()=>{
      store.commit("addTabs",{id:-1,title:"展示台",icon:'el-icon-s-platform',path:'/index'});
    })
    return{
      dataSource,
      removeTab,
      handleClick,
      onCollapse
    }
  }
})
</script>

<style scoped>

</style>
